---
type: tutorial
title: Combina layout per ottenere il meglio da entrambi i mondi
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Aggiungi il tuo layout di pagina base al layout che formatta i tuoi articoli del blog
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ora che hai aggiunto un layout a ogni articolo del blog, è il momento di far sembrare i tuoi articoli come il resto delle pagine sul tuo sito web!

<PreCheck>
  - Nidifica il tuo layout di articoli del blog all'interno del tuo layout di pagina principale
</PreCheck>

## Nidifica i tuoi due layout

Hai già un `BaseLayout.astro` per definire il layout generale delle tue pagine.

`MarkdownPostLayout.astro` ti dà un po' di templating aggiuntivo per proprietà comuni degli articoli del blog come `title` e `date`, ma i tuoi articoli del blog non assomigliano alle altre pagine del tuo sito. Puoi far corrispondere l'aspetto dei tuoi articoli del blog al resto del tuo sito **nidificando i layout**.

<Steps>
1. In `src/layouts/MarkdownPostLayout.astro`, importa `BaseLayout.astro` e usalo per avvolgere l'intero contenuto del template. Non dimenticare di passare la prop `pageTitle`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,13}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. In `src/layouts/MarkdownPostLayout.astro`, puoi ora rimuovere il tag `meta` poiché è già incluso nel tuo `BaseLayout`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={6}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
    <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

3. Controlla l'anteprima del tuo browser su `http://localhost:4321/posts/post-1`. Ora dovresti vedere il contenuto renderizzato da:

    - Il tuo **layout di pagina principale**, inclusi i tuoi stili, link di navigazione e footer social.
    - Il tuo **layout di articoli del blog**, incluse proprietà frontmatter come descrizione, data, titolo e immagine.
    - Il **contenuto Markdown del tuo singolo articolo del blog**, incluso solo il testo scritto in questo articolo.

4. Nota che il titolo della tua pagina è ora visualizzato due volte, una volta da ciascun layout.

    Rimuovi la riga che visualizza il titolo della tua pagina da `MarkdownPostLayout.astro`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

5. Controlla di nuovo l'anteprima del tuo browser su `http://localhost:4321/posts/post-1` e verifica che questa riga non sia più visualizzata e che il tuo titolo sia visualizzato solo una volta. Apporta qualsiasi altra modifica necessaria per assicurarti di non avere contenuti duplicati.
</Steps>


  Assicurati che:

    - Ogni articolo del blog mostri lo stesso template di pagina e che non manchi alcun contenuto. (Se a uno dei tuoi articoli del blog manca del contenuto, controlla le sue proprietà frontmatter.)

    - Nessun contenuto sia duplicato su una pagina. (Se qualcosa viene renderizzato due volte, allora assicurati di rimuoverlo da `MarkdownPostLayout.astro`.)

    Se desideri personalizzare il tuo template di pagina, puoi farlo.



<Box icon="question-mark">

### Metti alla prova le tue conoscenze

1. Questo ti permette di nidificare un layout all'interno di un altro e di sfruttare il vantaggio di lavorare con pezzi modulari.

    <MultipleChoice>
      <Option>
        distribuzione continua
      </Option>
      <Option>
        design responsive
      </Option>
      <Option isCorrect>
        design basato su componenti
      </Option>
    </MultipleChoice>

2. Layout multipli sono particolarmente utili per progetti che contengono pagine Markdown, come un...

    <MultipleChoice>
      <Option isCorrect>
        blog
      </Option>
      <Option>
        dashboard
      </Option>
      <Option>
        app di chat
      </Option>
    </MultipleChoice>

3. Quale di questi fornisce templating per tutte le tue pagine?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso nidificare layout, controllando eventuali elementi duplicati.
</Checklist>
</Box>

### Risorse

- [Nidificare Layout in Astro](/it/basics/layouts/#inserire-layour-uno-nellaltro)
